<template>
  <div class="main">
    <div class="lefttwo">
      <div class="xsts">
        <div class="title">线上投诉</div>
        <div class="xstsdate" style="margin-top: 12px">
          <div
            v-for="(item, index) in dataliest"
            @click="xzx(index)"
            class="datelist"
            :class="cur == index ? 'ac' : ''"
          >
            {{ item }}
          </div>
        </div>
        <div class="peiall">
          <div id="pie1"></div>
          <div
            class="pieinfo"
            style="padding-top: 20px; box-sizing: border-box"
          >
            <div class="pielist">
              <div>处理案件总数:</div>
              <div><span style="color: #0091fe">300</span>件</div>
            </div>
            <div class="pielist">
              <div>超时未处理数:</div>
              <div><span style="color: #fe0000">5</span>件</div>
            </div>
            <div class="pielist">
              <div>平均处理时效:</div>
              <div><span style="color: #a8ea55">3</span>小时/件</div>
            </div>
          </div>
          <div class="peiall" style="display: flex; align-items: center">
            <div id="pie2"></div>
            <div class="pieinfo">
              <div class="pielist">
                <div>投诉处理满意度:</div>
                <div><span style="color: #fecb00">98%</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="xsts1" style="color: #fff">最新投诉情况</div>
        <div class="table" style="margin-top: 10px; border-radius: 0px">
          <div class="tableTr" style="width: 45%">投诉类型</div>
          <div class="tableTr" style="width: 55%">数量</div>
<!--          <div class="tableTr" style="width: 30%">详情</div>-->
        </div>
        <div
          class="tableColumn"
          style="background: #163f27; border-bottom: 1px solid #000"
          :class="index % 2 == 0 ? 'tableColumn3' : 'tableColum4'"
          v-for="(item, index) in 3"
        >
          <div class="tableTr" style="width: 45%">
            <img
              src="../../../assets/biaoqing.png"
              style="vertical-align: middle; margin-right: 10px"
              alt=""
            />
            <span style="color: #d26f43" v-if="index===0">景点</span>
            <span style="color: #d26f43" v-if="index===1">住宿</span>
            <span style="color: #d26f43" v-if="index===2">餐饮</span>
          </div>
          <div class="tableTr" style="width: 55%">
            <span v-if="index===0">5</span>
            <span v-if="index===1">2</span>
            <span v-if="index===2">3</span>
          </div>
<!--          <div class="tableTr" style="width: 30%">更多</div>-->
        </div>
      </div>
      <div class="ylpx">
        <div class="title">舆论排行</div>
        <div style="margin-top: 28px" class="yqpxlb">
          <div class="yqxlln">
            <div class="yqpie" id="yqpie"></div>

            <div class="yqtitle">微博</div>
          </div>
          <div class="yqxlln">
            <div class="yqpie" id="yqpie1"></div>
            <div class="yqtitle">APP</div>
          </div>
          <div class="yqxlln">
            <div class="yqpie" id="yqpie2"></div>
            <div class="yqtitle">论坛</div>
          </div>
        </div>
        <div class="ha">"徐闻"互联网热度</div>
        <div id="yklytjchart1" style="margin-top: 10px"></div>
      </div>
    </div>
  </div>
</template>
<style>
.gzlabel {
  color: #fff;
}
.gzgnum {
  color: #43d7b5;
  font-weight: bold;
  font-size: 20px;
  font-style: italic;
}
.gzlistt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.gzfb {
  width: 120px;
  height: 32px;
  background: #105065;
  border: 1px solid #066ca9;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  line-height: 32px;
}
.gznum {
  text-align: center;
  font-size: 30px;
  color: #fe0000;
  font-weight: bold;
  font-style: italic;
}
.ha {
  text-align: left;
  color: #fff;
  margin-top: 10px;
}
.el-input__icon {
  line-height: 26px !important;
}
.el-input__inner {
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  height: 25px;
}
.el-collapse-item__arrow {
  position: absolute;
  color: #297bf7;
  /* margin-left: -64px !important; */
}
</style>
<script>
import * as echarts from "echarts";
export default {
  components: {},
  watch: {},
  created() {},
  data() {
    return {
      cur: 0,
      dataliest: ["日", "月", "年"],
    };
  },
  mounted() {
    this.getdata3();
    this.getdataa();
    this.getdata11();
    this.getdata111();
    this.getdata33();
    this.getdata32();
    this.getdata31();
    this.getChart9();
    this.getChart10();
  },
  methods: {
    getChart9() {
      const myChart = echarts.init(this.$refs.chart9);
      var dataArr = 84;
      var colorSet = {
        color: "#468EFD",
      };
      var option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },

        series: [
          {
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            radius: "60%",

            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, colorSet.color],
                  [1, "#111F42"],
                ],
                width: 8,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + "%";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, 82],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 18,
                fontWeight: "700",
                color: colorSet.color,
              },
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, 46], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 14, //表盘上的标题文字大小
                fontWeight: 400,
                fontFamily: "PingFangSC",
              },
            },
            data: [
              {
                name: "正面：",
                value: dataArr,
              },
            ],
            pointer: {
              show: true,
              length: "55%",
              radius: "20%",
              width: 8, //指针粗细
            },
            animationDuration: 4000,
          },
          {
            name: "外部刻度",
            type: "gauge",
            //  center: ['20%', '50%'],
            radius: "84%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "#fff",
              distance: 25,
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "10":
                    return "10";
                  case "20":
                    return "20";
                  case "30":
                    return "30";
                  case "40":
                    return "40";
                  case "50":
                    return "50";
                  case "60":
                    return "60";
                  case "70":
                    return "70";
                  case "80":
                    return "80";
                  case "90":
                    return "90";
                  case "100":
                    return "100";
                }
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: colorSet.color, //用颜色渐变函数不起作用
                width: 1,
              },
              length: -8,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -20,
              lineStyle: {
                color: colorSet.color, //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    getChart10() {
      var chartDom = document.getElementById("chart10");
      var myChart = echarts.init(chartDom);
      var color = ["#D9726B", "#244A8B", "#14BED1", "#886EFF", "#089BAB"];
      var legend = [
        "景点",
        "餐饮",
        "住宿",
        "购物",
        "交通",
        "安全",
        "旅行社",
        "其他",
      ];
      var seriesData = [
        { name: "景点", value: 30 },
        { name: "餐饮", value: 10 },
        { name: "住宿", value: 15 },
        { name: "购物", value: 23 },
        { name: "交通", value: 23 },
        { name: "安全", value: 23 },
        { name: "旅行社", value: 23 },
        { name: "其他", value: 23 },
      ];
      var option = {
        color: color,
        grid: {
          top: "5%",
          left: 0,
          right: "1%",
          bottom: 5,
          containLabel: true,
        },
        legend: {
          orient: "vertical",
          top: "center",
          right: 0,
          textStyle: {
            align: "left",
            verticalAlign: "middle",
            rich: {
              value: {
                color: color,
                fontSize: 10,
              },
              rate: {
                color: "rgba(255,255,255,0.9)",
                fontSize: 10,
              },
            },
          },
          data: legend,
          formatter: (name) => {
            if (seriesData.length) {
              const item = seriesData.filter((item) => item.name === name)[0];
              return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
            }
          },
        },
        series: [
          {
            name: "需求类型占比",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["45%", "65%"],
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{value|{c}}\n{label|{b}}",
                rich: {
                  value: {
                    padding: 5,
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 32,
                  },
                  label: {
                    align: "center",
                    verticalAlign: "middle",
                    fontSize: 16,
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "12",
                },
              },
            },
            labelLine: {
              show: false,
              length: 0,
              length2: 0,
            },
            data: seriesData,
          },
        ],
      };

      myChart.setOption(option);

      this.getDefaultSelected(myChart);
    },

    getdata3() {
      const chartDom = document.getElementById("klchart2");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        grid: {
          top: "15%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
          },
          data: ["03-01", "03-02", "03-03", "03-04", "03-05", "03-06", "03-07"],
        },
        yAxis: {
          type: "value",

          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: 17,
            color: "#297bf7",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4386f5", // 起点颜色
                  },
                  {
                    offset: 1,
                    color: "#2af7c8", // 终点颜色
                  },
                ]),
                shadowColor: "rgba(0, 0, 0, 0)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },

    getdata111() {
      const chartDom = document.getElementById("yklytjchart1");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: true,
            color: "#ffffff",
          },
          data: ["微博", "APP", "论坛", "公众号", "社区"],
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "15",
            color: "#86e475",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              barBorderRadius: 4, // 柱子的圆角
            },
            data: [320, 302, 301, 334, 390],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata32() {
      const chartDom = document.getElementById("yqpie2");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#4af3ff",
              textStyle: {
                fontSize: 25, // 字体大小
                lineHeight: 60, // 行高设置为30px
              },

              fontWeight: "bold",
              formatter: function (e) {
                return `15%`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#616a5c", "#1ae8c6"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata31() {
      const chartDom = document.getElementById("yqpie1");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#4af3ff",
              textStyle: {
                fontSize: 25, // 字体大小
                lineHeight: 60, // 行高设置为30px
              },

              fontWeight: "bold",
              formatter: function (e) {
                return `15%`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#616a5c", "#1ae8c6"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata33() {
      const chartDom = document.getElementById("yqpie");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#4af3ff",
              textStyle: {
                fontSize: 25, // 字体大小
                lineHeight: 60, // 行高设置为30px
              },

              fontWeight: "bold",
              formatter: function (e) {
                return `15%`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#616a5c", "#1ae8c6"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdataa() {
      const chartDom = document.getElementById("pie1");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],

            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#fe0000",
              fontSize: 20,
              fontWeight: "bold",
              formatter: function (e) {
                return `15`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#0091fe", "#fe0000"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    getdata11() {
      const chartDom = document.getElementById("pie2");
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "90%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              color: "#fecb00",
              fontSize: 20,
              fontWeight: "bold",
              formatter: function (e) {
                return `98%`;
              },
            },

            labelLine: {
              show: false,
            },
            color: ["#fecb00", "#000"],
            data: [
              { value: 1048, name: "总数" },
              { value: 735, name: "未处理" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    xzx(index) {
      this.cur = index;
    },
  },
};
</script>
<style scoped>
.jqxq {
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  line-height: 6px;
  height: 25px;
  margin-left: 22px;
  display: inline-block;
  border: 1px solid #0091fe;
  cursor: pointer;

  width: auto;
  background: #0f4e60;
}
.klyjyj {
  color: #fff;
  margin-top: 18px;
}
.yjxx {
  margin-top: 18px;
  height: 264px;
  padding: 15px;

  box-sizing: border-box;
  background: rgba(3, 8, 13, 0.6);
}
.qyitem:nth-child(3n) {
  margin-right: 0px !important;
}
.qyitem img {
  height: 80px;
}
.qyitem {
  float: left;
  margin-right: 15px;
  width: 119px;
  color: #fff;
  margin-bottom: 12px;
}
.pielist {
  margin-bottom: 11px;
  color: #ffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pielist span {
  font-size: 20px;
  font-weight: bold;

  margin-right: 5px;
}
#pie1 {
  width: 171px;
  height: 90px;
  margin-top: 10px;
  float: left;
}
#pie2 {
  width: 171px;
  height: 90px;
  margin-top: 10px;
  float: left;
}
.peiall {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.qhname {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
}
.qhoimg img {
  width: 63px;
  height: 53px;
}
.qhoimg {
  text-align: center;
  margin-top: 19px;
}
.qhdate {
  text-align: left;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  font-style: italic;
}
.qhlist1:nth-child(3n) {
  margin-right: 0px !important;
}
.qhlist1 {
  width: 33%;
  float: left;
  height: 186px;
  border-top: 1px solid #0cd0a4;
  background: #0f3b26;
  padding: 10px;
  box-sizing: border-box;
  margin-right: 1px;
}
.qhlist {
  margin-top: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.temm span {
  font-size: 64px !important;
}
.temm {
  text-align: left;
  font-size: 20px;
  color: #01ffff;
  font-weight: bold;
  font-style: italic;
}
.w66 {
  float: left;
  width: 66%;
  padding-left: 15px;
  box-sizing: border-box;
}
.weather {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  font-style: italic;
}
.dyyf img {
  width: 104px;
  height: 81px;
}
.dyyf {
  text-align: center;
}
.w33 {
  float: left;
  width: 33%;
}
.one {
  padding: 15px 0px;
  height: 954px !important;
  box-sizing: border-box;
  background: rgba(3, 8, 13, 0.6);
  margin-left: 18px;
}
.ybb {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 22px;
}
.rightone {
  width: 421px;
  height: auto;
  float: right;
  margin-left: 18px;
}
.paizi {
  width: 22px;
  height: 22px;
  background: #ff9d4d;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 22px;
}
.tableColumn {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  border-bottom: 1px solid #0e785c;

  line-height: 42px;
}
.tableColumn2 {
  margin: 0 auto;
  width: 375px;
  height: 42px;
  /* background: rgba(67, 215, 181, 0.1); */
  border-bottom: 1px solid #0e785c;
  text-align: center;
  /* border-radius: 8px; */
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.table {
  width: 375px;
  height: 42px;
  background: rgba(67, 215, 181, 0.5);
  border-radius: 8px;
  margin: 0 auto;
  font-size: 13px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}
.tableTr {
  display: inline-block;
  width: 20%;
  text-align: center;
}
.cyright {
  width: calc(100% - 208px);
  height: 80px;
  padding: 10px;
  box-sizing: border-box;
  color: #01dfde;
  background: #0e2013;
  float: left;
}

.pfnum {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 0px;
  color: #ffcc00;
}
.jp img {
  width: 33px !important;
  height: 40px !important;
}
.jp {
  text-align: center;
}
.pf {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  height: 70px;
}
.cyimg img {
  width: 100%;
  height: 100%;
}
.cyimg {
  width: 208px;
  height: 80px;
  position: relative;
  float: left;
}
.cypxdy {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.djlabel1 {
  width: 25%;
  float: left;
  height: 10px;
  margin-top: 5px;
}
.djlabel1:first-child {
  background: #00fefe;
}
.djlabel1:nth-child(2) {
  background: #43d7b5;
}
.djlabel1:nth-child(3) {
  background: #ffcc00;
}

.djlabel1:nth-child(4) {
  background: #fd0000;
}

.djlabel {
  width: 25%;
  float: left;
  color: #fff;
  text-align: center;
}
.jddj {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.jdslnum {
  color: #01ffff;
  font-weight: bold;
  font-style: italic;
}
.jdrzfour:nth-child(2n-2) {
  background: #0f3140;
}
.jdrzfour:last-child {
  border-bottom: 1px solid #0f3140;
}
.jdrzfour {
  text-align: left;
  height: 30px;
  line-height: 30px;
  color: #fff;
  padding-left: 10px;
  box-sizing: border-box;
}
.jdrubz {
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
.jdlist {
  width: calc(100% - 160px);
  height: auto;
  float: left;
}

.jdgl {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.cyzhpx {
  width: 100%;
  height: 286px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 18px;
}
.sxtall {
  margin-top: 23px;
  width: 100%;
  height: 290px;
  border: 1px solid #00fefe;
}
.sxtzs {
  text-align: left;
  color: #fff;
}
.sxtnum {
  text-align: left;
  font-size: 30px;
  color: #0091fe;
  font-style: italic;
  font-weight: bold;
}
.sxtone {
  width: 50%;
  padding-left: 24px;
  box-sizing: border-box;
  float: left;
}
.sxtfirst1 {
  width: 100%;
  height: 210px;
  padding: 0px 77px 0px 20px;

  padding-top: 10px;
  box-sizing: border-box;
}
.sxtfirst {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #00fefe;
  padding-top: 10px;
  box-sizing: border-box;
}
.sxtfg {
  width: 100%;
  height: 670px;
  background: rgba(3, 8, 13, 0.6);

  padding: 15px;
  box-sizing: border-box;
}
.ylpx {
  width: 100%;
  height: 402px;
  background: rgba(3, 8, 13, 0.6);

  margin-top: 19px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
}

.yqfxzs {
  width: 100%;
  height: 300px;
  background: rgba(3, 8, 13, 0.6);

  margin-top: 19px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
}

.xsts {
  width: 100%;
  height: 532px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.jdqk {
  width: 100%;
  height: 350px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 18px;
}

.lefttwo {
  float: left;
  width: 420px;
  height: auto;
}

#yklytjchart1 {
  width: 100%;
  height: 154px;
}

.nlcf {
  color: #fff;
  text-align: left;
}
.kljcnum span {
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}
.kljcnum {
  color: #fff;
}
.kljclabel {
  color: #fff;
}
.kljclist {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jqys {
  margin-top: 17px;
  width: 100%;
  height: 220px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.klpx {
  width: 100%;
  height: 283px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.ykcf {
  margin-top: 17px;
  width: 100%;
  height: 280px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.kljc {
  margin-top: 17px;
  width: 100%;
  height: 174px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.kynum {
  color: #43d7b5;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  margin: 0px 5px;
}
.jknum {
  color: #0091fe;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  margin: 0px 5px;
}
.ljpm {
  width: 100%;
  height: 35px;
  border: 1px dashed #fff;
  margin-top: 5px;
  color: #fff;
  line-height: 35px;
  padding: 0px 5px;
  box-sizing: border-box;
}
.bhd span {
  color: #dfb704;
}
.bhd {
  position: absolute;
  right: 56px;
}
.jrjq {
  position: absolute;

  line-height: 14px;
  right: 14px;
}
.title {
  font-size: 24px;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 600;
  text-align: left;
  font-style: italic;
  color: #ffffff;
  width: 308px;
  background: url("../../../assets/qjjk/标题背景.png") no-repeat;
  background-size: 100% 100%;
  height: 42px;
  padding-left: 25px;
  box-sizing: border-box;
}
.main {
  position: absolute;
  left: 22px;
  top: 90px;
  width: 420px;
}
.leftone {
  width: 421px;
  float: left;
  height: auto;
}
.jdgk {
  width: 100%;
  height: 230px;
  background: rgba(3, 8, 13, 0.6);
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}
.ac {
  color: #fff !important;

  background: #0091fe !important;
}
.datelist {
  float: right;
  cursor: pointer;
  width: 33px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  color: #0370be;
  border: 1px solid #0370be;
}
.xstsdate {
  margin-top: 20px;
  overflow: hidden;
}

.klchart2 {
  width: 100%;
  height: 180px;
  margin-top: 18px;
}
</style>
<style>
.collapseZdy .el-collapse-item__header {
  background-color: rgba(1, 255, 255, 0.16);
  border-radius: 3px 3px 0px 0px;
  font-size: 14px;
  font-family: Source Han Sans SC, Source Han Sans SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  padding-left: 6px;
  border-bottom: 3px solid #01ffff;
  position: relative;
  margin-bottom: 10px;
  height: 40px;
}
.collapseZdy {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.collapseZdy .el-collapse-item__wrap {
  background-color: transparent !important;
  border-bottom: none !important;
  color: #fff !important;
}
.collapseZdy .el-collapse-item__content {
  color: #fff !important;
  padding-bottom: 0;
  height: 100%;
}
</style>
<style scoped>
.yqtitle {
  font-size: 20px;
  text-align: center;
  color: #eff0ef;
}
.yqpie {
  width: 100%;
  height: 100px;
}
.yqpxlb {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
}
.yqxlln {
  width: 33.3%;
  height: auto;
}
</style>
